<template>
  <div id="home">
    <el-card :body-style="{ padding: '0px' }" shadow='never'>
      <div slot="header">
        <span>
          <img src="/static/logo.png" alt>随堂问卷管理系统
          <el-tag size="mini" type="text">[ {{userInfo.username}} ]</el-tag>
          <el-button type="text" @click="logout">注销</el-button>
        </span>
      </div>
      <!-- card body -->
      <el-container>
        <el-container>
          <el-aside width="200px" height="500px" v-loading="loading">
            <el-menu :router="true">
              <el-menu-item
                v-for="menu in menus"
                :key="menu.id"
                :index="menu.router" 
              >{{menu.menu_name}}</el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      loading:false
    };
  },
  computed: {
    userInfo() {
      return this.store.get("userInfo");
    }
  },
  created() {
    this.getusers();
    this.getMenus();
    this.$root.$on('updataMenus',()=>{
      this.getMenus()
    })
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.axios.get("/users/islogin").then(ret => {
        let { data, error } = ret.data;
        if (data == 0) {
          vm.$router.push("/login");
        }
      });
    });
  },
  methods: {
    getMenus() {
      this.loading=true
      this.axios.get("/menus",{
        params:{
          status:1
        }
      }).then(ret => {
        this.loading=false
        let { data, error } = ret.data;
        this.menus = data;
        // console.log(this.menus)
      });
    },
    logout() {
      this.axios
        .get("/users/logout")
        .then(() => {
          this.$router.push({
            name: "login"
          });
        })
        .catch();
    },
    getusers() {
      this.axios
        .get("/users")
        .then(ret => {
          let { data, error } = ret;
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.el-menu{
  position: relative;
  height: 100%;
}
</style>

